<template>
  <div class="container">
    <n-drawer v-model:show="isDrawer" :width="width">
      <n-drawer-content :title="title" closable>
        <n-form
          :model="formParams"
          :rules="rules"
          ref="formRef"
          label-placement="left"
          :label-width="100"
        >
          <n-form-item label="交易名称" path="subject">
            <n-input v-model:value="formParams.subject" />
          </n-form-item>
          <n-form-item label="用户ID" path="userId">
            <n-input v-model:value="formParams.userId" />
          </n-form-item>
          <n-form-item label="交易凭证" path="tradeNo">
            <n-input v-model:value="formParams.tradeNo" />
          </n-form-item>
          <n-form-item label="交易状态" path="tradeStatus">
            <n-input v-model:value="formParams.tradeStatus" />
          </n-form-item>
          <n-form-item label="商户订单号" path="outTradeNo">
            <n-input v-model:value="formParams.outTradeNo" />
          </n-form-item>
          <n-form-item label="交易金额" path="totalAmount">
            <n-input v-model:value="formParams.totalAmount" />
          </n-form-item>
          <n-form-item label="支付宝ID" path="buyerId">
            <n-input v-model:value="formParams.buyerId" />
          </n-form-item>
          <n-form-item label="付款时间" path="gmtPayment">
            <n-input v-model:value="formParams.gmtPayment" />
          </n-form-item>
          <n-form-item label="买家付款金额" path="buyerPayAmount">
            <n-input v-model:value="formParams.buyerPayAmount" />
          </n-form-item>
        </n-form>

        <template #footer>
          <n-space>
            <n-button @click="closeDrawer">关闭</n-button>
          </n-space>
        </template>
      </n-drawer-content>
    </n-drawer>
  </div>
</template>
<script lang="ts" setup>
  import { defineProps, reactive, ref } from 'vue';

  const rules = {
    label: {
      required: true,
      message: '请输入标题',
      trigger: 'blur',
    },
    path: {
      required: true,
      message: '请输入路径',
      trigger: 'blur',
    },
  };

  defineProps({
    title: {
      type: String,
      default: '订单详情',
    },
    width: {
      type: Number,
      default: 450,
    },
  });

  let isDrawer = ref(false);
  let formParams = reactive({
    id: 0,
    buyerPayAmount: '',
    gmtPayment: '',
    buyerId: '',
    totalAmount: '',
    outTradeNo: '',
    tradeStatus: '',
    tradeNo: '',
    userId: '',
    subject: '',
  });

  function openDrawer(record) {
    isDrawer.value = true;
    formParams.buyerPayAmount = record.buyerPayAmount;
    formParams.gmtPayment = record.gmtPayment;
    formParams.buyerId = record.buyerId;
    formParams.totalAmount = record.totalAmount;
    formParams.outTradeNo = record.outTradeNo;
    formParams.tradeStatus = record.tradeStatus;
    formParams.tradeNo = record.tradeNo;
    formParams.userId = record.userId;
    formParams.subject = record.subject;
    formParams.id = record.id;
  }
  defineExpose({
    openDrawer,
  });

  function closeDrawer() {
    isDrawer.value = false;
  }
</script>
<style lang="less" scoped></style>
